<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">作业详情</block>
		</cu-custom>
		<view class="container">
			<text class="title-text">{{operation.title}}</text>
			<view class="info">
				<text class="info-text">开始时间：{{format(operation.startTime)}}</text>
				<text class="info-text">结束时间：{{format(operation.endTime)}}</text>
			</view>
			<view class="dialog-content" v-html="html"></view>
			<!-- <rich-text :nodes="cont"></rich-text> -->
		</view>
	</view>
</template>

<script>
	import {
		format
	} from "@/common/js/utils";
	export default {
		data() {
			return {
				cont:'',
				operation:{},
				format
			}
		},
		onLoad(e) {
			this.$http.get('/api/v1/works/query',e).then(res=>{
				const {content,...operation} = res;
				this.cont = content;
				this.operation = operation;
			});
		},
		computed:{
			html(){
				return this.cont.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
	}
	img{
		width: 100% !important;
	}
	.container {
		background-color: #fff;
		padding: 10px 10px;

		.title-text {
			line-height: 20px;
			font-size: 17.5px;
			flex: 1;
			color: #333;
			letter-spacing: 0.5px;
			word-spcing: 0.5px;
		}

		.info {
			margin-top: 5px;
			margin-bottom: 50px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.info-text {
				color: #999;
				font-size: 14.5px;
			}
		}
	}

	.dialog-content {
		overflow-y: auto;
		overflow-x: hidden;
		width: 100%;
		::v-deep img,
		::v-deep p,
		::v-deep span {
			width: 100%;
		}
	}
</style>
